<template>
    <div class="brand">
        <div class="container">
            <div class="title">
                <img src="~assets/index/title2.png" alt="">
            </div>
            <div>
                <div class="pic-box">
                    <div class="box-top">
                        <div class="top-item"><img src="~assets/index/brand1.png" alt=""></div>
                        <div class="top-item item2">
                            <div>
                                <img src="~assets/index/brand2.png" alt="">
                            </div>
                            <div class="item2-2">
                                 <img src="~assets/index/brand3.png" alt="">
                            </div>
                           
                        </div>
                       
                    </div>
                     <div class="bottom-box">
                         <div class="bottom-item"><img src="~assets/index/brand4.png" alt=""></div>
                         <div class="bottom-item"><img src="~assets/index/brand5.png" alt=""></div>
                     </div>
                </div>
                <div class="right">
                    <img src="~assets/index/brandword.png" alt="">
                </div>
            </div>
            
        </div>
        
    </div>
</template>

<script>
export default {
      name:'IndexBrand',
        
        data (){
            return {
             
            }
        },
        methods: {
           
            
        },
}
</script>
<style lang="stylus" scoped>
@import '~assets/varibles.styl'
div 
    overflow hidden
.brand
    height 900px
    background url('~assets/index/reputation.png') no-repeat center center
    .container
        overflow hidden
        width $container
        margin $center
        .title
            width 375px
            margin-top 100px
        .pic-box
            float left
            width 600px 
            margin-left -5px
            margin-top 40px
            overflow hidden 
            // background red  
        .right
            margin-top 40px
            float right    
.box-top
    overflow hidden
.top-item
    float left
    margin-left 5px
.item2
    
    width 248px    
    .item2-2
        margin-top -5px
.bottom-box
    margin-top  -10px        
    .bottom-item
        margin-left 5px
        float left
.pic-box img   
    transition all 0.3s
.pic-box img:hover
    transform scale(0.9)

</style>
